<!-- 商品回收站 -->
<template>
  <div class="pageContent">
    <!-- 回收站头部 -->
    <div class="shopTitle">
      <div class="shopRecycleOne">商品回收站</div>
      <div class="shopRecycleTwo">
        <el-button @click="getRecycle">刷新</el-button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="shopRecycleContent">
      <!-- 筛选查询 -->
      <div class="shopSift">
        <el-collapse v-model="activeNames" style="border: 1px solid #e4e4e4;" class="chaxun">
          <el-collapse-item title="商品筛选" name="1">
            <div class="siftContent">
              <el-form :inline="true" class="demo-form-inline" :model="siftBase">
                <el-form-item label="关键词">
                  <el-input v-model="siftBase.keyword" placeholder="商品名称"></el-input>
                </el-form-item>
                <el-form-item label="分类">
                <!-- <el-select v-model="siftBase.classify" placeholder="全部">
                    <el-option label="item.categoryName" value="item.categoryId"></el-option>
                    </el-select> -->
                  <el-cascader v-model="siftBase.classify" :options="options"></el-cascader>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="searchShopCon">筛选</el-button>
                  <el-button @click="resetInput">重置</el-button>
                </el-form-item>
              </el-form>
            </div>

          </el-collapse-item>
        </el-collapse>
      </div>
      <!-- 数据列表 -->
      <div class="shopRecycleData">
        <div class="dataHead">
          <div class="dataHead-left">数据列表</div>
          <div class="dataHead-right">
            <el-form :inline="true" class="demo-form-inline" :model="setMethods">
              <el-form-item>
                <el-button type="danger" @click="batchDelete" :disabled="this.sels.length === 0">批量删除</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="recycleTable">
          <el-table border style="width: 100%" :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column prop="prodId" type="selection" width="50" align="center"></el-table-column>
            <el-table-column label="序号" width="70" align="center">
              <template slot-scope="scope">
                {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
              </template>
            </el-table-column>
            <el-table-column label="商品图片" align="center" width="180">
              <template slot-scope="scope">
                <img :src="scope.row.pic" />
              </template>
            </el-table-column>
            <el-table-column prop="prodName" label="商品名称" width="180" align="center">
            </el-table-column>
            <el-table-column prop="articleNumber" label="货号" align="center">
            </el-table-column>
            <el-table-column prop="maxPrice,minPrice" label="价格" align="center">
              <template slot-scope="scope">
                {{ scope.row.maxPrice }} ~ {{ scope.row.minPrice }}
              </template>
            </el-table-column>
            <el-table-column prop="categoryName" label="分类" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template v-slot="scope">
                <el-button type="text" size="small" @click="reductionShopData(scope.row)">还原</el-button>
                <el-button type="text" size="small" @click="deleteDict(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <div style="margin: 30px auto">
        <el-pagination background align="center" :page-size="pageSize" :current-page="currentPage"
          @current-change="handleCurrentChange" layout="total,prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
    
<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "shopRecycle",
  data() {
    return {
      activeNames: ["1"],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      tableData: [],
      options: [],
      sels: [], //当前选框选中的值
      siftBase: {
        keyword: "", //关键词
        classify: "", //分类
      },
      classifyTwo: [], //二级分类
      setMethods: {
        batchAction: "", //批量操作
      },
    };
  },
  mounted() {
    this.getRecycle();
    this.getQueryClass().then((res) => {
      const allList = this.getAllList(res);
      let arr = allList.map((v) => ({
        categoryId: v.categoryId,
        parentId: v.parentId,
        value: v.categoryName,
        label: v.categoryName,
        grade: v.grade,
      }));
      let p = arr.filter((v) => v.grade == "一级分类");
      let c = arr.filter((v) => v.grade == "二级分类");
      p.forEach((item) => {
        item.children = c.filter((v) => v.parentId == item.categoryId);
      });
      this.options = p;
    });
  },
  methods: {
    ...mapActions("shop", [
      "inquireRecycle",
      "deleteRecycleShop",
      "getQueryClass",
      "searchShopRecycle",
      "reductionRecycleShop",
      "batchDeleteRecycleShop"
    ]),
    getRecycle() {
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      this.inquireRecycle({ currentPage, pageSize }).then((res) => {
        // console.log("shopList的currentPage,pageSize", currentPage, pageSize);
        this.tableData = res.data;
        this.total = res.count;
        // console.log("tableData", res);
      });
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.inquireRecycle({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        this.tableData = res.data;
      });
    },
    //删除
    deleteDict(row) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("h", row.prodId);
          let prodId = row.prodId;
          this.deleteRecycleShop({ prodId }).then((res) => {
            // console.log("r", res);
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getRecycle();
          });
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量删除
    handleSelectionChange(sels) {
      this.sels = sels;
    },
    batchDelete() {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let idList = this.sels.map((item) => item.prodId);
        // let idList = ids.join(",");
        this.batchDeleteRecycleShop(idList).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getRecycle();
        });
      });
    },
    //还原
    reductionShopData(row) {
      this.$confirm("是否还原?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log("h", row.prodId);
          let prodId = row.prodId;
          this.reductionRecycleShop(prodId).then((res) => {
            this.$message({
              message: "还原成功",
              type: "success",
            });
            this.getRecycle();
          });
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "info",
            message: "已取消还原",
          });
        });
    },
    //搜索
    callback(res) {
      this.tableData = res.data;
      this.total = res.count;
      // console.log("res1", res.data);
    },
    searchShopCon() {
      let obj = {
        prodName: this.siftBase.keyword,
        categoryId: this.siftBase.classify,
      };
      this.searchShopRecycle([obj, this.callback]);
      // this.handleCurrentChange();
      console.log("obj", obj);
    },
    //重置
    resetInput() {
      this.siftBase.keyword = "";
      this.siftBase.classify = "";
      this.getRecycle();
    },
    //平铺分类数据
    getAllList(arr) {
      const allList = [...arr];
      arr.forEach((arrItem) => {
        if (arrItem.children) {
          this.getAllList(arrItem.children).forEach((list) => {
            allList.push(list);
          });
        }
      });
      return allList;
    },
  },
};
</script>
    
<style scoped>
html div {
  font-size: 14px;
}

::-webkit-scrollbar {
  display: none;
}

.pageContent {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  /* overflow-y: scroll; */
}

.shopTitle {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f0f0f0;
}

.shopRecycleOne {
  height: 26px;
  font-size: 18px;
  font-weight: 400;
  border-left: 6px solid #1cb09a;
  padding-left: 10px;
  margin-left: 20px;
}

.shopRecycleTwo {
  margin-right: 20px;
}

.shopRecycleTwo button {
  background-color: #1cb09a;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
}

.shopRecycleContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shopSift {
  width: 95%;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 25px;
  border: 1px solid #e4e4e4;
}

::v-deep .el-collapse {
  width: 100%;
}

::v-deep .el-collapse-item__header {
  box-sizing: border-box;
  padding: 0 18px;
  background-color: #f0f0f0;
}

.siftContent {
  box-sizing: border-box;
  padding: 30px 15px 0;
}

.el-form-item {
  margin-right: 80px;
}

.siftButton {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.siftButton .el-button {
  margin-right: 20px;
  padding: 12px 35px;
}

.shopRecycleData {
  width: 95%;
  margin-top: 25px;
  border: 1px solid #e4e4e4;
}

.dataHead {
  height: 50px;
  background-color: #f0f0f0;
  box-sizing: border-box;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dataHead-right {
  display: flex;
  align-items: center;
}

.dataHead-right .el-form-item .el-select {
  height: 34px;
  width: 130px;
}

::v-deep .dataHead-right .el-form-item .el-select .el-input__inner {
  line-height: 34px;
  height: 34px;
}

.dataHead-right .el-form-item {
  margin: 0 15px 0 0;
}

::v-deep .cell img {
  width: 100px;
  height: 100px;
}
</style>